Ember.js Components হল অ্যাপ্লিকেশনের UI উপাদান যা পুনঃব্যবহারযোগ্য এবং মডুলার কোড তৈরি করতে সহায়ক। কম্পোনেন্টগুলি ব্যবহারকারীর ইন্টারফেস (UI) এর জন্য ডিজাইন করা হয় এবং এইগুলি একটি নির্দিষ্ট অংশের মধ্যে ইনপুট, আউটপুট এবং লজিক পরিচালনা করে। Ember.js কম্পোনেন্টে টেমপ্লেট এবং জাভাস্ক্রিপ্ট কোড থাকে, যা UI এবং এর আচরণ কন্ট্রোল করে।
এমবারজেএস কম্পোনেন্ট তৈরি এবং কাস্টম ইন্টারঅ্যাকশন ব্যাখ্যা করতে নিচে আলোচনা করা হলো।
Ember.js Component তৈরি
Ember.js-এ একটি কম্পোনেন্ট তৈরি করতে Ember CLI ব্যবহার করা হয়। যখন আপনি একটি নতুন কম্পোনেন্ট তৈরি করেন, তখন এটি দুটি ফাইল তৈরি করবে:
- JavaScript ফাইল: কম্পোনেন্টের লজিক এবং স্টেট পরিচালনা করার জন্য।
- Handlebars (HBS) টেমপ্লেট ফাইল: কম্পোনেন্টের UI ডিজাইন করার জন্য।
১. Ember CLI দিয়ে কম্পোনেন্ট তৈরি
Ember CLI ব্যবহার করে নতুন কম্পোনেন্ট তৈরি করার জন্য নিচের কমান্ডটি ব্যবহার করা হয়:
ember generate component user-profile
এটি দুটি ফাইল তৈরি করবে:
- app/components/user-profile.js (কম্পোনেন্টের জাভাস্ক্রিপ্ট লজিক)
- app/templates/components/user-profile.hbs (কম্পোনেন্টের টেমপ্লেট)
২. কম্পোনেন্টের জাভাস্ক্রিপ্ট ফাইল
user-profile.js ফাইলটি কম্পোনেন্টের লজিক বা আচরণ সংজ্ঞায়িত করে:
// app/components/user-profile.js
import Component from '@glimmer/component';
export default class UserProfileComponent extends Component {
// কম্পোনেন্টের প্রপার্টি
userName = 'John Doe';
userAge = 30;
// কাস্টম মেথড
changeUserName(newName) {
this.userName = newName;
}
}
এখানে, userName এবং userAge কম্পোনেন্টের প্রপার্টি হিসেবে সংজ্ঞায়িত হয়েছে। changeUserName একটি কাস্টম মেথড, যা কম্পোনেন্টের প্রপার্টি পরিবর্তন করবে।
৩. কম্পোনেন্টের টেমপ্লেট
user-profile.hbs ফাইলটি কম্পোনেন্টের HTML রেন্ডার করার জন্য ব্যবহৃত হয়:
<!-- app/templates/components/user-profile.hbs -->
<h1>User Profile</h1>
<p>Name: {{this.userName}}</p>
<p>Age: {{this.userAge}}</p>
<button {{on "click" this.changeName}}>Change Name</button>
এখানে, {{this.userName}} এবং {{this.userAge}} কম্পোনেন্টের প্রপার্টি টেমপ্লেটে রেন্ডার হয়েছে। {{on "click" this.changeName}} ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে changeName মেথড কল করবে।
কাস্টম ইন্টারঅ্যাকশন পরিচালনা
Ember.js কম্পোনেন্টে ইন্টারঅ্যাকশন হ্যান্ডল করার জন্য Actions ব্যবহৃত হয়। আপনি events বা actions ব্যবহার করে ইউজারের ক্লিক, ইনপুট বা অন্যান্য ইন্টারঅ্যাকশন ট্র্যাক করতে পারেন।
১. অ্যাকশন ব্যবহার করে ইন্টারঅ্যাকশন
এখানে changeName মেথডে ক্লিক করার মাধ্যমে userName পরিবর্তন হবে:
// app/components/user-profile.js
import Component from '@glimmer/component';
import { action } from '@ember/object';
export default class UserProfileComponent extends Component {
userName = 'John Doe';
userAge = 30;
@action
changeName() {
this.userName = 'Jane Doe'; // নতুন নাম সেট করা
}
}
এখানে, @action ডেকোরেটর ব্যবহার করা হয়েছে, যা কম্পোনেন্টের মেথডকে অ্যাকশন হিসেবে চিহ্নিত করে। {{on "click"}} ইভেন্ট হ্যান্ডলার ব্যবহার করে টেমপ্লেটে changeName মেথড কল করা হয়েছে।
২. ইনপুট ফিল্ডের মাধ্যমে কাস্টম ইন্টারঅ্যাকশন
ইউজারের ইনপুট গ্রহণ করে কাস্টম ইন্টারঅ্যাকশন তৈরি করা যায়:
<!-- app/templates/components/user-profile.hbs -->
<h1>User Profile</h1>
<p>Name: {{this.userName}}</p>
<p>Age: {{this.userAge}}</p>
<input type="text" {{on "input" this.updateName}} placeholder="Change Name" />
এখানে, input ফিল্ডে টাইপ করার মাধ্যমে updateName মেথড কল হবে, যা ইউজারের ইনপুট অনুযায়ী নাম পরিবর্তন করবে।
৩. ইভেন্ট হ্যান্ডলার এবং অ্যাকশন
কম্পোনেন্টে ইভেন্ট হ্যান্ডলার এবং অ্যাকশন ব্যবহারের জন্য Ember.js @action ডেকোরেটর ব্যবহার করে ইন্টারঅ্যাকশনগুলো ম্যানেজ করে।
// app/components/user-profile.js
import Component from '@glimmer/component';
import { action } from '@ember/object';
export default class UserProfileComponent extends Component {
userName = 'John Doe';
userAge = 30;
@action
updateName(event) {
this.userName = event.target.value;
}
}
এখানে, updateName মেথড event.target.value ব্যবহার করে ইউজারের ইনপুট ডেটা গ্রহণ করবে এবং কম্পোনেন্টের userName প্রপার্টিতে সেট করবে।
কম্পোনেন্টে Data Binding
Ember.js-এ কম্পোনেন্টের মধ্যে data binding সরলীকৃত করা হয়েছে। আপনি কম্পোনেন্টের প্রপার্টি এবং টেমপ্লেটের মধ্যে ডেটা সিঙ্ক্রোনাইজ করতে পারেন।
১. Two-way Data Binding
Two-way data binding মানে হল, টেমপ্লেটের ইনপুট পরিবর্তন হলে সেই পরিবর্তন কম্পোনেন্টের প্রপার্টিতে প্রতিফলিত হবে এবং উল্টোও সত্য।
<!-- app/templates/components/user-profile.hbs -->
<h1>User Profile</h1>
<p>Name: {{this.userName}}</p>
<p>Age: {{this.userAge}}</p>
<input type="text" value={{this.userName}} {{on "input" this.updateName}} />
এখানে, value={{this.userName}} এর মাধ্যমে userName প্রপার্টি এবং ইনপুট ফিল্ডের মান সিঙ্ক্রোনাইজ করা হয়েছে। ইনপুট ফিল্ডে টাইপ করলে userName প্রপার্টির মান পরিবর্তিত হবে।
২. কম্পোনেন্টের মডিফায়েড ডেটা রেন্ডার
আপনি যদি কম্পোনেন্টে কোনো ডেটা পরিবর্তন করতে চান, তবে তা টেমপ্লেটে রেন্ডার হবে। এইভাবে আপনি ইনপুট ফিল্ডের মান পরিবর্তন এবং কম্পোনেন্টের স্টেট একসাথে পরিচালনা করতে পারেন।
Ember.js Components আপনাকে পুনঃব্যবহারযোগ্য UI উপাদান তৈরি করতে দেয়, যা আপনার অ্যাপ্লিকেশনের ফ্রন্টএন্ড ইন্টারঅ্যাকশন এবং লজিক পরিচালনা করতে সক্ষম। Actions এবং two-way data binding ব্যবহার করে আপনি কাস্টম ইন্টারঅ্যাকশন তৈরি করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে এবং কোডের পুনঃব্যবহারযোগ্যতা বাড়ায়। Ember.js কম্পোনেন্টসের মাধ্যমে UI-র আচার-আচরণ ও ডেটা ম্যানিপুলেশন সহজভাবে করা যায়।
Read more
